<!--
 * @Author: anshengtyp
 * @Date: 2024-02-27 08:37:44
 * @LastEditTime: 2024-03-13 10:22:04
 * @LastEditors: anshengtyp
 * @Description:方位设置
-->

<template>
  <div class="orientation">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">

      <el-form-item label="默认水平角度" prop="defaultHorizontalAngle">
        <el-input type="number" :min="0" v-model="ruleForm.defaultHorizontalAngle" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item label="默认垂直角度" prop="defaultVerticalAngle">
        <el-input type="number" :min="0" v-model="ruleForm.defaultVerticalAngle" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item label="默认缩放级别" prop="defaultZoomLevel">
        <el-input type="number" :min="1" v-model="ruleForm.defaultZoomLevel" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item label="最小视野角" prop="minViewAngle">
        <el-input type="number" :min="1" v-model="ruleForm.minViewAngle" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item label="最大视野角" prop="maxViewAngle">
        <el-input type="number" :min="1" v-model="ruleForm.maxViewAngle" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item label="修正平移" prop="correctPan">
        <el-slider :min="-180" :max="180" v-model="ruleForm.correctPan" :marks="marks">
        </el-slider>
      </el-form-item>

      <el-form-item label="校正倾斜" prop="correctTilt">
        <el-slider :min="-180" :max="180" v-model="ruleForm.correctTilt" :marks="marks">
        </el-slider>
      </el-form-item>

      <el-form-item label="修正滚动" prop="correctRoll">
        <el-slider :min="-180" :max="180" v-model="ruleForm.correctRoll" :marks="marks">
        </el-slider>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
export default {
  props: ['newData'],
  data() {
    return {
      marks: {
        '-180': '-180',
        '-90': '-90',
        0: '0',
        90: '90',
        180: '180',
      },
      imageUrl: '',
      fileList: [],
      ruleForm: {
        defaultHorizontalAngle: 0,
        defaultVerticalAngle: 0,
        defaultZoomLevel: 50,
        minViewAngle: 30,
        maxViewAngle: 90,
        correctRoll: 0,
        correctTilt: 0,
        correctPan: 0
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
        ],
      }
    };
  },

  created() {

  },
  watch: {
    newData: {
      handler(val) {
        if (val) {
          this.ruleForm = val;
        }
      }
    },
    ruleForm: {
      immediate: true,
      deep: true,
      handler(val) {
        this.$emit('getMarkersConfig', val);
      }
    }
  },
  methods: {
    clear() {
      this.ruleForm = this.$options.data().ruleForm;
    }
  },
};
</script>

<style lang="scss" scoped>
.orientation {

  .el-input-number {
    width: 100%;
  }

  .el-slider {
    padding: 0 15px;
  }
}
</style>
